<route lang="json">
{
  "meta": {
    "title": "about us"
  }
}
</route>
<script setup lang="ts">
import { _require } from "@@/utils/tools/index";
import { useInView } from "@@/hooks/toolsHooks";
import { inTopGroup } from "@@/common/js/animation";

const { vInView } = useInView();

const title = import.meta.env.VITE_GLOB_APP_TITLE;

const part5 = computed(() => [
  {
    title: "Innovation",
    content: `We love a challenge and have little respect for the status quo. Experience has taught us that problems are a matter of perspective and that, with new ideas and a fresh way of looking at things, solutions – more often than not – present themselves.`,
  },
  {
    title: "Ambition",
    content: `The scale of a task won’t deter us when we believe it will take us closer to our vision. Every problem is an opportunity. Every obstacle, the chance to take a calculated risk and question assumptions. In short, we’re not afraid to think big.`,
  },
  {
    title: "Trust",
    content: `Fundamental to a prosperous economy, trust also lies at the heart of our company. Indeed, we believe it is the bedrock of a healthy society committed to equality and fairness. We trust each other, we engineer trust into our solutions, and we work hard every day to earn the trust of our clients and partners.`,
  },
  {
    title: "Adaptability",
    content: `We remain open-minded, objective and flexible at all times. When the facts change, so does our approach. We embrace that agility and encourage all those we work with to do the same.`,
  },
  {
    title: "Respect",
    content: `We’re respectful of the ideas and perspectives of others, we celebrate peoples’ difference and recognise the achievements of others. We hold the needs and health of our environment dear. And we have no tolerance for bullying, harassment or discrimination of any kind.`,
  },
]);
</script>

<template>
  <CpageView class="auto-MT-lg Mcol-lg">
    <!-- 一栏 -->
    <ElRow class="ML-xxl" :justify="'space-between'" :align="'middle'">
      <ElCol :xs="24" :span="10">
        <div v-in-view:once="(e) => inTopGroup(e.target)" class="MR-lg">
          <h1>
            <span in-top>What is<span>&nbsp;</span></span>
            <span in-top>{{ title }}</span>
          </h1>
          <div class="T-weak MT-sm">
            <p in-top>{{ title }} is a trade management company Division.</p>
            <p class="MT-sm" in-top>
              {{ title }} focuses on the development and application of
              quantitative trading Strategy.
            </p>
          </div>
        </div>
      </ElCol>
      <ElCol :xs="24" :span="14">
        <ElImage
          class="part-1_image"
          :src="_require('src/assets/images/desplay/3.jpg')"
          :fit="'cover'"
        />
      </ElCol>
    </ElRow>
    <!-- 二栏 -->
    <div class="Mrow-xxl MT-xxl T-A-C">
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h2>
          <span in-top>What<span>&nbsp;</span></span
          ><span in-top>we do</span>
        </h2>
        <div class="MT-md auto-MT-sm T-weak">
          <p in-top>
            The main objective is to generate sustainable returns and minimize
            the estimated risk of investment to maximize the benefit of
            investors.
          </p>
          <p in-top>
            Trading managers use an extremely complex expert advisory process to
            trade. Such programs are based on a large number of traditional day
            trading statistics, help the program to monitor market trends and
            price changes, and provide support and basis for trading decisions
            to achieve sustainable returns and minimize investment risk.
          </p>
        </div>
      </div>
      <div class="MT-xl" v-in-view:once="(e) => inTopGroup(e.target)">
        <ElImage
          in-top
          style="height: 600rem"
          :src="_require('src/assets/images/icon/idea.svg')"
        />
      </div>
    </div>
    <!-- 三栏 -->
    <div
      class="MT-xxl bg-img PD-xxl T-A-C C-white"
      :style="{
        '--bg-img': `url(${_require('src/assets/images/desplay/5.jpg')})`,
      }"
    >
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h2 class="T-A-C">
          <span in-top>Our<span>&nbsp;</span></span
          ><span in-top>team</span>
        </h2>
        <h4 class="MT-md">
          <span in-top>
            The team has 10 years of rich experience in finance Personnel and
            technical experts.
          </span>
          <span in-top>
            They use the first Advanced techniques and mathematical models
            through in-depth Market analysis and risk management to improve
            investment returns Report, and reduce investment risk.
          </span>
        </h4>
      </div>
    </div>
    <!-- 四栏 -->
    <div
      v-in-view:once="(e) => inTopGroup(e.target)"
      class="MT-xxl Prow-xxl T-A-C"
    >
      <h2>
        <span in-top>Our<span>&nbsp;</span></span
        ><span in-top>vision</span>
      </h2>
      <p in-top class="T-weak">
        We’re working towards an empowered, interconnected world.
      </p>
      <ElImage
        in-top
        class="MT-md"
        :src="_require('src/assets/images/desplay/4.png')"
      />
    </div>
    <!-- 五栏 -->
    <div class="Prow-xxl">
      <div v-in-view:once="(e) => inTopGroup(e.target)">
        <h2 class="T-A-C">
          <span in-top>Our<span>&nbsp;</span></span>
          <span class="T-M1" in-top>values</span>
        </h2>
        <p in-top class="MT-md T-A-C T-weak">
          Our team shares deep expertise in finance and technology but what
          unites us is our beliefs.
        </p>
      </div>
      <ElRow v-in-view:once="(e) => inTopGroup(e.target)" class="MT-lg">
        <ElCol v-for="item in part5" in-top :span="8" :xs="12">
          <div class="hover-line-L MG-md">
            <h3>{{ item.title }}</h3>
            <p class="MT-md T-weak">
              {{ item.content }}
            </p>
          </div>
        </ElCol>
      </ElRow>
    </div>
  </CpageView>
</template>

<style lang="scss" scoped></style>
